  window.onload=function(){
    let obj = {
        audio: document.getElementById("music"),
        button: {
            prev: document.getElementById("prev"),
            play_pause: document.getElementById("play-pause"),
            next: document.getElementById("next"),
            stop: document.getElementById("restart"),
            control: document.getElementById("control"),
        },
        line: {
            outline: document.getElementById("outline"),
            innerline: document.getElementById("innerline"),
            circle: document.getElementById("circle")
        },
        show: {
            songName: document.getElementById("songName"),
            curtimeSpan: document.getElementById("curtime"),
            sumtimeSpan: document.getElementById("sumtime"),
        },
        currentSongName: '',
        curmusicNum: 1,
        innerWidth: 0,
        outWidth: 200,
        // circleLeft: 0,
        songList: ['周杰伦-甜甜的', '我不配-周杰伦', '搁浅-周杰伦', '七里香-周杰伦'],
        timeList: [245, 289, 240, 299],
        tempTimer1: null, //一个暂时的属性也来存放计时器
        tempTimer2: null, //一个暂时的属性也来存放计时器
        curTime: 0,
        sumTime: 0,
        init: function() {
            this.getcurmusicNum();
            this.showSongName();
            this.setCurtime(this.curTime);
            this.setSumTime();
            this.button.play_pause.addEventListener("click", this.playOrPause.bind(this));
            this.button.control.addEventListener("click", this.playOrPause.bind(this));
            this.button.next.addEventListener("click", this.nextSong.bind(this));
            this.button.prev.addEventListener("click", this.prevSong.bind(this));
            this.button.stop.addEventListener("click", this.stopSong.bind(this));
            // this.line.circle.addEventListener("mousedown", this.moveCircle.bind(this));
        },
        format: function(num) { //格式化时间函数
            let m = parseInt(num / 60);
            let s = num % 60;
            let result = String(m).padStart(2, "0") + ":" + String(s).padStart(2, "0");
            return result;
        },
        setSumTime: function() {
            this.sumTime = this.timeList[this.curmusicNum - 1];
            let showSumTime = this.format(this.sumTime);
            this.show.sumtimeSpan.innerText = showSumTime;
        },
        setCurtime: function(num) {
            this.curTime = parseInt(num);
            let showCurTime = this.format(this.curTime);
            this.show.curtimeSpan.innerText = showCurTime;
        },
        showSongName: function() {
            this.currentSongName = this.songList[this.curmusicNum - 1];
            this.show.songName.innerText = this.currentSongName;
        },
        playOrPause: function() {
            if (this.audio.paused) {
                this.audio.play();
                this.songNameMove();
                this.progressBar();
                this.button.play_pause.className = "glyphicon glyphicon-pause";
                this.button.control.children[1].className = "control-music glyphicon glyphicon-pause";
            } else {
                this.audio.pause();
                this.button.play_pause.className = "glyphicon glyphicon-play";
                this.button.control.children[1].className = "control-music glyphicon glyphicon-play";
                clearInterval(this.tempTimer1);
                clearInterval(this.tempTimer2);
            }
        },
        getcurmusicNum: function() {
            let str = this.audio.src.match(/\d{3}/g)[0];
            this.curmusicNum = str.replace(/0/g, '');
        },
        nextSong: function() {
            //找到当前音乐地址的数字编号并且+1
            //file:///C:/Users/czq/Desktop/music/music/001.mp3
            this.curmusicNum++;
            if (this.button.play_pause.className == "glyphicon glyphicon-play") {
                this.button.play_pause.className = "glyphicon glyphicon-pause";
            }
            if (this.curmusicNum >= 5) this.curmusicNum = 1;
            this.audio.src = 'public/music/' + String(this.curmusicNum).padStart(3, '0') + '.mp3';
            this.audio.play();
            this.showSongName();
            this.setCurtime(0);
            this.setSumTime();
            this.progressBar();
        },
        prevSong: function() {
            //找到当前音乐地址的数字编号并且-1
            //file:///C:/Users/czq/Desktop/music/music/001.mp3
            this.curmusicNum--;
            if (this.curmusicNum <= 0) this.curmusicNum = 4;
            if (this.button.play_pause.className == "glyphicon glyphicon-play") {
                this.button.play_pause.className = "glyphicon glyphicon-pause";
            }
            this.audio.src = 'public/music/' + String(this.curmusicNum).padStart(3, '0') + '.mp3';
            this.audio.play();
            this.showSongName();
            this.setCurtime(0);
            this.setSumTime();
            this.progressBar();
        },
        stopSong: function() {
            this.audio.load(); //重载歌曲
            this.audio.pause(); //暂停歌曲
            this.button.play_pause.className = "glyphicon glyphicon-play"; //切换类
            this.button.control.children[1].className = "control-music glyphicon glyphicon-play";
            clearInterval(this.tempTimer1); //清楚歌名定时器
            clearInterval(this.tempTimer2); //清除进度条定时器
            this.setCurtime(0);
            this.innerWidth = 0;
            this.line.innerline.style.width = this.innerWidth + "px";
            this.show.songName.innerText = this.currentSongName;
        },
        //歌名滚动方法
        songNameMove: function() {
            this.tempTimer1 = setInterval(() => {
                let start = this.show.songName.innerText.substring(0, 1);
                let end = this.show.songName.innerText.substring(1);
                this.show.songName.innerText = end + start;
            }, 500);
        },
        progressBar: function() {
            let that = this;
            this.tempTimer2 = setInterval(function() {
                that.innerWidth = that.curTime / that.sumTime * that.outWidth;
                // that.circleLeft = that.innerWidth - 2;
                that.line.innerline.style.width = that.innerWidth + "px";
                // that.line.circle.style.left = that.circleLeft + "px";
                that.curTime = Math.ceil(that.audio.currentTime);
                that.show.curtimeSpan.innerText = that.format(that.curTime);
                if (that.audio.ended) {
                    that.nextSong();
                }
            }, 1000);
        },
        // },
        // moveCircle: function(ev) {
        //     let flag = this.audio.paused;
        //     //event的兼容性
        //     if (!flag) {
        //         this.audio.pause();
        //     }
        //     var ev = ev || event;

        //     //获取鼠标按下的坐标
        //     var x1 = ev.clientX;

        //     //获取元素的left，top值
        //     var l = this.line.circle.offsetLeft;

        //     let that = this;
        //     //给可视区域添加鼠标的移动事件
        //     document.onmousemove = function(ev) {

        //         //event的兼容性
        //         var ev = ev || event;

        //         //获取鼠标移动时的坐标
        //         var x2 = ev.clientX;

        //         //计算出鼠标的移动距离
        //         var x = x2 - x1;

        //         //移动的数值与元素的left，top相加，得出元素的移动的距离
        //         var ls = x + l;

        //         //更改元素的left，top值
        //         if (ls >= 0 && ls <= that.outWidth) {
        //             clearInterval(that.tempTimer2);
        //             that.circleLeft = ls - 2;
        //             that.innerWidth = ls;
        //             that.line.circle.style.left = that.circleLeft + 'px';
        //             that.line.innerline.style.width = that.innerWidth + 'px';
        //             that.curTime = Math.ceil(that.innerWidth / that.outWidth * that.sumTime);
        //             that.audio.currentTime = that.curTime;
        //             that.show.curtimeSpan.innerText = that.format(that.curTime);
        //         }
        //     }

        //     //清除
        //     document.onmouseup = function(ev) {
        //         if (!flag) {
        //             that.audio.play();
        //         } else {
        //             that.audio.pause();
        //         }
        //         document.onmousemove = null;
        //     }

        // }
    }
    obj.init();
  }  